<script setup>
import { computed, onMounted } from "vue";
import MainTopToolbar from "./components/toolbar/MainTopToolbar.vue";
import MainLeftToolbar from "./components/toolbar/MainLeftToolbar.vue";
import LoginRegisterModal from "./components/login/LoginRegisterModal.vue";
import { zhCN, dateZhCN } from "naive-ui";
// 引入主题共享库
import { useThemeStore } from "./stores/themeStore";

// 创建共享库实例对象
const themeStore = useThemeStore();

// 去除共享库的数据（getter 计算属性）
const theme = computed(() => themeStore.theme);

// 组件视图渲染成功后
onMounted(() => {
    window.addEventListener("storage", (event) => {
        if (event.key === "theme") {
            // 主题数据发生变化 -- 需要同步主题中 store 中的共享数据
            themeStore.$hydrate();
        }
    });
});
</script>

<template>
    <n-config-provider :theme="theme.name" :locale="zhCN" :date-locale="dateZhCN">
        <n-message-provider>
            <n-loading-bar-provider>
                <n-layout position="absolute">
                    <n-layout-header bordered>
                        <!-- 主头部应用区工具栏 -->
                        <main-top-toolbar />
                    </n-layout-header>
                    <n-layout has-sider position="absolute" style="top: 64px">
                        <n-layout-sider bordered :width="64" content-style="padding: 24px 0; text-align: center;">
                            <!-- 左侧应用区工具栏 -->
                            <main-left-toolbar />
                        </n-layout-sider>
                        <n-layout-content embedded>
                            <!-- 路由视图 -->
                            <router-view />
                        </n-layout-content>
                    </n-layout>
                </n-layout>
                <!-- 登录注册的模态框 -->
                <login-register-modal />
            </n-loading-bar-provider>

        </n-message-provider>
    </n-config-provider>
</template>

<style scoped>
.n-layout-header {
    height: 64px;
    padding: 0 26px;
}
</style>